<template>
  <div id="LifeService" :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}">
    <div style="height: 60vh;text-align:center;padding-top: 20vh;">
      <div style="margin-bottom: 10px;">
        <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png">
      </div>
      <div>暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'LifeService',
  data () {
    return {
      showEdition: true,
      NFJSData: [
        {
          name: '用水报装',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/3.png',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/45.png'
        },
        {
          name: '用气报装',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/4.png',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/46.png'
        },
        {
          name: '用电报装',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/5.png',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/47.png'
        },
        {
          name: '网络通讯 开通',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/6.png',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/48.png'
        },
      ],
    };
  },
  mounted () {
    this.showEdition = this.$store.state.Edition
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        "title": "我的考评"
      }).then(res => {
      }).catch(err => {
      })
    }
  },
}
</script>
<style lang="scss" scoped>
#LifeService {
  padding: 20px 0;
  height: calc(100vh - 60px);
  overflow: auto;
  background: #fff;
  .top {
    position: relative;
    color: #ffffff;
    .left-top {
      position: absolute;
      left: 10px;
      top: 10px;
      .btn {
        width: auto;
        height: 26px;
        border: 1px solid #e1eaff;
        border-radius: 4px;
        display: inline-block;
        line-height: 26px;
        text-align: center;
      }
    }
    .bottom-top {
      width: 95%;
      position: absolute;
      left: 10px;
      bottom: 10px;
      .btn {
        float: right;
        width: auto;
        height: 26px;
        // border: 1px solid #e1eaff;
        border-radius: 16px;
        display: inline-block;
        line-height: 26px;
        text-align: center;
      }
    }
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.1);
  }
  .SQList {
    height: calc(100vh - 60px);
    background: #ffffff;
    .title {
      width: 100%;
      height: 50px;
      background: #007aff;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      font-size: 20px;
      position: relative;
    }
    ul li {
      padding: 10px;
      height: 90px;
      border-bottom: 1px solid #d2d2d2;
      margin-bottom: 10px;
    }
  }
  .content {
    width: 100%;
    height: calc(100vh - 260px);

    .line {
      width: 6px;
      height: 26px;
      background: #007aff;
      display: inline-block;
    }
    .content-nfjs li {
      width: 49%;
      height: 75px;
      float: left;
      margin-top: 2%;
      position: relative;
      background-size: 100% 100% !important;
      display: flex;
      align-items: center;
      padding-left: 16px;
    }
    .content-nffw li {
      width: 20%;
      float: left;
      margin-top: 2%;
      span {
        width: 100%;
        display: inline-block;
        font-size: 14px;
        text-align: center;
      }
    }
    .content-nffm li {
      width: 49%;
      float: left;
      margin-top: 2%;
      margin-bottom: 3%;
      .text {
        width: 100%;
        display: inline-block;
        height: 6vh;
        background: #ffffff;
        box-shadow: 2px 1px 6px 0px rgba(0, 0, 0, 0.17);
        border-radius: 0px 0px 20px 20px;
        text-align: center;
        line-height: 6vh;
      }
    }
  }
}
</style>
